CSS 利用网格布局实现全宽元素

<style>
  .wrapper {
    display: grid;
    grid-template-columns:
      1fr
      min(30ch, 100%)
      1fr;
  }
  .wrapper > * {
    grid-column: 2;
  }
  .full-bleed {
    grid-column: 1 / -1;
  }
  
  .meerkat {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
</style>

<main class="wrapper">
  <h1>Some Heading</h1>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
  <div class="full-bleed">
    <img
      alt="a satisfied-looking cute meerkat"
      src="/cfj-mats/meerkat.jpg"
      class="meerkat"
    />
  </div>
  <p>
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</main>

/* Cosmetic baseline styles */
h1 {
  margin: 32px 0;
}
p {
  margin: 16px 0;
}
body {
  padding: 0;
  margin: 0;
}